<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div @click="$router.push('/')">
          <img src="../assets/imagebox/5.jpg" />
        </div>
        <div>
          <div v-if="this.token">
            <el-button @click="login" round>登录</el-button>
          </div>

          <div v-else>
            <el-avatar :src="UserPictureAvatar"></el-avatar>
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="UserPassword"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item @click.native="UserPicture"
                  >修改头像</el-dropdown-item
                >
                <el-dropdown-item @click.native="zhuxiao"
                  >注销</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <!-- 轮播图 -->
      <el-row>
        <el-carousel :interval="4000" height="600px">
          <el-carousel-item v-for="item in imagebox" :key="item.id">
            <img :src="item" class="image" />
          </el-carousel-item>
        </el-carousel>
      </el-row>
      <div>
        <el-card style="width: 100%; height: 5%">
          <div class="btn">
            <el-button type="primary" style="width: 25%" @click="goNew"
              >新闻时事</el-button
            >
            <el-button type="primary" style="width: 25%" @click="goCom"
              >公司动态</el-button
            >
            <el-button type="primary" style="width: 25%" @click="goOk"
              >大神风采</el-button
            >
            <el-button type="primary" style="width: 25%" @click="goAbout"
              >关于我们</el-button
            >
          </div>
        </el-card>
      </div>

      <el-container class="uu">
        <el-main>
          <router-view></router-view>
        </el-main>

        <!-- 排行 -->
        <el-aside style="width: 20%">
          <div style="padding-top: 20px">
            <el-card class="box-card" style="width: 85%; margin-left: 5%">
              <div slot="header" class="clearfix">
                <span
                  >48小时阅读排行<el-link
                    href="/fortiei"
                    target="_blank"
                    style="float: right"
                    >>>>更多</el-link
                  ></span
                >
              </div>
              <div v-for="(item, index) in this.tenRead" :key="index">
                <el-link v-if="index < 4" @click="GetArticeFromId(item.id)"
                  >{{ index + 1 }}.{{ item.title }}</el-link
                >
              </div>
            </el-card>
            <!-- //十天点赞排行当成编辑推荐 -->
            <el-card
              class="box-card"
              style="margin-top: 30px; width: 85%; margin-left: 5%"
            >
              <div slot="header" class="clearfix">
                <span
                  >站长推荐<el-link
                    href="/tendaybianji"
                    target="_blank"
                    style="float: right"
                    >>>>更多</el-link
                  ></span
                >
              </div>
              <!-- //十天点赞排行当成编辑推荐 -->
              <div v-for="(item, index) in this.tenRecommend" :key="index">
                <el-link
                  v-if="index < 4"
                  @click="GetArticeFromId(item.id)"
                  target="_blank"
                  style=""
                  >{{ index + 1 }}.{{ item.articleTitle }}</el-link
                >
              </div>
            </el-card>
            <!-- //十天的评论排行 GetCommentTopten -->
            <el-card
              class="box-card"
              style="margin-top: 30px; width: 85%; margin-left: 5%"
            >
              <div slot="header" class="clearfix">
                <span
                  >10天评论排行<el-link
                    target="_blank"
                    href="/tendaycentent"
                    style="float: right"
                    >>>>更多</el-link
                  ></span
                >
              </div>
              <div v-for="(item, index) in this.tenComments" :key="index">
                <el-link
                  v-if="index < 4"
                  @click="GetArticeFromId(item.id)"
                  target="_blank"
                  style=""
                  >{{ index + 1 }}.{{ item.title }}</el-link
                >
              </div>
            </el-card>
            <!-- 二维码 -->
            <div style="margin-top: 20p；">
              <el-popover
                placement="top-start"
                width="200"
                title=""
                trigger="hover"
                content=""
              >
                <div style="width: 200px">
                  <img src="../assets/imagebox/4.jpg" alt="" />
                </div>
                <el-button
                  slot="reference"
                  circle
                  style="float: left; margin-top: 20px"
                  >扫码添加微信群</el-button
                >
              </el-popover>
            </div>

            <div style="margin-top: 20px; float: left">
              <el-popover
                placement="top-start"
                width="200"
                title=""
                trigger="hover"
                content="a"
              >
                <div style="width: 200px">
                  <img src="../assets/imagebox/4.jpg" alt="" />
                </div>
                <el-button slot="reference" circle style="float: left"
                  >扫码添加QQ群</el-button
                >
              </el-popover>
            </div>

            <div style="margin-top: 20px; float: left">
              <el-popover
                placement="top-start"
                width="200"
                title=""
                trigger="hover"
                content="a"
              >
                <div style="width: 200px">
                  <img src="../assets/imagebox/4.jpg" alt="" />
                </div>
                <el-button slot="reference" circle style="float: left"
                  >扫码关注公众号</el-button
                >
              </el-popover>
            </div>
          </div>
        </el-aside>
      </el-container>
      <!-- 修改头像对话框 -->
      <el-dialog title="修改头像" :visible.sync="dialogVisible" width="30%">
        <el-upload
          class="avatar-uploader"
          :action="host"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="tableData.avatar"
            :src="dialogFormAvatarFullUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="userPicturePut">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 弹出的模态框 -->
      <el-dialog
        style="text-align: center"
        title="修改密码"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="formData">
          <el-form-item label="旧密码" label-width="70px">
            <el-input
              v-model="formData.Username"
              autocomplete="off"
              style="width: 25vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" label-width="70px">
            <el-input
              type="password"
              v-model="formData.password"
              autocomplete="off"
              style="width: 25vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" label-width="70px">
            <el-input
              type="password"
              v-model="formData.avatar"
              autocomplete="off"
              style="width: 25vw"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handSave">确 定</el-button>
        </div>
      </el-dialog>

      <el-footer>
        Copyright © 2021-2021 就爱科技 版权所有. All rights reserved.
        <a
          href="https://beian.miit.gov.cn/#/Integrated/index"
          style="
            display: inline-block;
            text-decoration: none;
            margin-top: 30px;
            color: black;
            margin-left: 10px;
          "
        >
          闽ICP备2020020531号-1</a
        >
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35030302354423"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            color: black;
            margin-left: 10px;
          "
        >
          <img
            src="../assets/imagebox/beian.png"
            style="float: left; width: 20px"
          />
          闽公网安备 35030302354423号</a
        >
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { Get } from "../api/picture";
import { updatePicturePut, getById, PasswordPost } from "../api/users";
import { clearToken, getUsername, isLogin, getUserId } from "../Utils/auth";
import {
  GetCommentTopten,
  GetReadTopten,
  GetArticle,
  GetArticleById,
} from "../api/articles";

export default {
  data() {
    return {
      //图片处理
      host: this.$host + "picture/article",
      imagebox: [],
      username: getUsername(),
      token: true,
      //头像上传框默认不显示
      dialogVisible: false,
      //修改密码弹框
      dialogFormVisible: false,
      //头像完整路径
      dialogFormAvatarFullUrl: "",
      //头像上传后提交的数据
      tableData: {
        avatar: "",
        id: "",
      },
      //修改密码的模态框数据
      formData: {
        id: "",
        Username: "",
        password: "",
        avatar: "",
      },
      //头像路径
      UserPictureAvatar: "",

      //十天评论排行
      tenComments: [],
      //十天阅读量
      tenRead: [],
      //编辑推荐
      tenRecommend: [],
    };
  },
  methods: {
    //修改密码确认后的处理
    handSave() {
      this.formData.id = getUserId();
      console.log(this.formData);
      PasswordPost(this.formData).then((data) => {
        console.log(data);
        this.dialogFormVisible = false;
        if (data.data.code == 200) {
          this.$message({ type: "success", message: data.data.msg });
        } else {
          this.$message({ type: "error", message: data.data.msg });
        }
      });
    },
    GetArticeFromId(id) {
      GetArticleById(id).then(({ data }) => {
        // console.log(data);
        this.likevalue = data.likeSum;
        this.thisData = data.data;
        // console.log(this.thisData);
      });
      this.$router.push(`/Article?id=${id}`).then(() => {
        location.reload(); //页面重载
      });
    },
    // 头像上传成功后的处理
    handleAvatarSuccess(res, file) {
      // console.log(res);
      // 保存相对路径
      let prePath = res.filesPath;
      this.tableData.avatar = prePath;

      // 显示使用完整路径
      let fullPath = URL.createObjectURL(file.raw);
      this.dialogFormAvatarFullUrl = fullPath;
    },
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (400 / 1920) * this.screenWidth;
    },
    //修改密码
    UserPassword() {
      this.dialogFormVisible = true;
    },

    //修改头像
    UserPicture() {
      this.dialogVisible = true;
    },
    userPicturePut() {
      this.tableData.id = getUserId();

      updatePicturePut(this.tableData).then((data) => {
        // console.log(data);
        this.$message({ type: "success", message: data.code });
        //请求头像
        getById(getUserId()).then((data) => {
          // console.log(data.data.data.userPicture);
          this.UserPictureAvatar = data.data.data.userPicture;

          // console.log(this.UserPictureAvatar);
        });
        this.dialogVisible = false;
      });
    },
    goNew() {
      this.$router.push("/news");
    },
    goOk() {
      this.$router.push("/okami");
    },
    goCom() {
      this.$router.push("/company");
    },
    goAbout() {
      this.$router.push("/about");
    },
    login() {
      this.$router.push("/login");
    },
    zhuxiao() {
      //清理token
      clearToken();
      this.$router.push("/login");
    },
  },
  mounted() {
    if (isLogin()) {
      this.token = false;
    }
    //请求头像
    getById(getUserId()).then((data) => {
      // console.log(data.data.data.userPicture);
      this.UserPictureAvatar = data.data.data.userPicture;

      // console.log(this.UserPictureAvatar);
    });

    //加载轮播图图片
    Get().then(({ data }) => {
      for (let i = 0; i < data.data.length; i++) {
        if (data.data[i].status === "展示") {
          data.data[i].picturePath = this.$host + data.data[i].picturePath;
          this.imagebox.push(data.data[i].picturePath);
        }
      }
    });
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
    GetCommentTopten().then(({ data }) => {
      console.log(data);
      this.tenComments = data.data;
      // console.log(this.tenComments);
    });
    GetReadTopten().then(({ data }) => {
      // console.log(data);
      this.tenRead = data.data;
      // console.log(this.tenRead);
    });
    GetArticle().then(({ data }) => {
      // console.log(data);
      // this.tenRead = data.data;
      // console.log(data.data.data[0].order);
      var res = data.data.data;
      // console.log(res[0].order);
      // console.log(res);
      for (var i = res.length; i > 0; i--) {
        // console.log(res[i-1].order);
        if (res[i - 1].order === 1) {
          this.tenRecommend.push(res[i - 1]);
        }
      }
      // console.log(this.tenRecommend);
    });
  },
};
</script>

<style>
/* 模态框 */
.element.style {
  margin-left: 0px;
}

.el-dialog__footer {
  margin-right: 100px;
}

.el-dialog__body {
  align-content: center;
  justify-content: center;
  display: flex;
}

body {
  /* background-color: #545c64 !important; */
  margin: 0px !important;
  /* background-color:rgb(2, 51, 2); */
  /* background-color: antiquewhite; */
  /* background-color: pink; */
}

.el-header {
  /* background-color: pink; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: skyblue; */
}
.el-footer {
  height: 100px;
  background-color: #eeeeee;
  /* display: flex;
  align-items: center;
  justify-content: center; */
  text-align: center;
  font-size: 14px;
}
.el-button.is-circle {
  float: left;
}
.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  /* text-align: center; */
  /* line-height: 200px; */
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  min-height: calc(100vh - 120px);
  min-width: calc(100vh-120px);
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img {
  /*设置图片宽度和浏览器宽度一致*/
  width: 100%;
  height: inherit;
}
.el-card.is-always-shadow {
  width: 250px;
  height: 250px;
}

.jj {
  /* padding-top: 10px; */

  height: 270px;
  display: flex;
  /* align-items: center;   */
  justify-content: center;
  flex-wrap: nowrap;
}
.tp {
  padding-left: "20px";
  width: 200px;
  height: 200px;
}

.num {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* font-size: 3px; */
}
.btn {
  display: flex;
  align-items: center;
}
.el-divider__text,
.el-link {
  margin-top: 10px;
}
</style>